<template>
	<view class="container">
		<view class="wrap">
			<view class="form-wrap">
				<view class="form-item">
					<label>我需要</label>
					<input type="text" @input="getValue" data-k='0' v-model="form.contribution" placeholder="请输入贡献值数量" placeholder-class="pl"/>
					<text class="right-text">贡献值</text>
				</view>
				<view class="form-item">
					<label>价格</label>
					<input type="text" @input="getValue" data-k='1' v-model="form.money" placeholder="建议不低于1元" placeholder-class="pl"/>
					<text class="right-text">元</text>
				</view>
				<view class="form-item">
					<label>类型</label>
					<view class="radio-wrap">
						<view class="radio-item" @tap='switchItem(1)'>
							<uni-icons type="checkbox-filled" color="#0e0e0e" v-if='form.type == 1'></uni-icons>
							<uni-icons type="circle" color="#0e0e0e" v-else></uni-icons>
							<text>普通</text>
						</view>
						<view class="radio-item" @tap='switchItem(2)'>
							<uni-icons type="checkbox-filled" color="#0e0e0e" v-if='form.type == 2'></uni-icons>
							<uni-icons type="circle" color="#0e0e0e" v-else></uni-icons>
							<text>加急</text>
						</view>
					</view>
				</view>
			</view>
			<button class="btn line-center" :disabled="isDisabled" :loading="isLoading" @tap='pushTask'>立即发布</button>
		</view>
		<modal :showModal="showModal">
			<view class="success-wrap animated" :class="[showModal ? 'zoomIn':'zoomOut']">
				<image src="/static/success-icon.png"></image>
				<view class="tip">发布成功</view>
				<view class="know line-center" @tap='close'>我知道了</view>
			</view>
		</modal>
		
	</view>
</template>

<script>
	const app = getApp();
	import modal from '@/components/modal/modal.vue'
	export default {
		components:{
			modal,
		},
		data() {
			return {
				showModal:false,
				form:{
					contribution:'',
					money:'',
					type:'',
				},
				isDisabled:true,
				isLoading:false,
				againTaskId:''
			};
		},
		onShow() {
			if(app.globalData.againTaskId){
				this.againTaskId = app.globalData.againTaskId;
				this.getDetail()
			}
		},
		methods:{
			getValue(e) {
				let that = this,
					form = that.form,
					{
						k,
						type
					} = e.currentTarget.dataset,
					v = that.$trim(e.detail.value);
				switch (Number(k)) {
					case 0:
						form.contribution = v;
						this.setBtnStatus()
						break;
					case 1:
						form.money = v;
						this.setBtnStatus()
						break;
				}
				that.form = form;
			},
			getDetail(){
				app.globalRequest({
					api:app.getApi().task.detailBuyTask,
					data:{
						task_id:this.againTaskId
					}
				}).then(res=>{
					if(res.code == 0){
						this.form.contribution = res.data.contribution;
						this.form.money = res.data.money;
						this.form.type = res.data.type;
						this.setBtnStatus()
					}
				})
			},
			setBtnStatus(){
				let form = this.form;
				if (form.contribution && form.money && form.type) {
					this.isDisabled = false;
				} else {
					this.isDisabled = true;
				}
			},
			switchItem(type){
				this.form.type = type;
				this.setBtnStatus()
			},
			pushTask(){
				this.isDisabled = true;
				app.globalRequest({
					api:app.getApi().task.createBuyTask,
					method:'POST',
					data:this.form,
				}).then(res=>{
					if(res.code == 0){
						this.isDisabled = false;
						this.showModal = true;
					}else{
						this.isDisabled = false;
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			close(){
				this.showModal = false;
				this.form.contribution = '';
				this.form.money = '';
				this.form.type = '';
			}
		}
	}
</script>
<style>
	page{
		width: 100%;
		height: 100%;
		background: #F6F7FA;
	}
</style>
<style lang="scss" scoped>
	.container{
		width: 100%;
		min-height: 100%;
		background: #F6F7FA;
	}
	.wrap{
		padding-top:24rpx;
	}
	.form-wrap{
		margin:0 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		.form-item{
			height: 88rpx;
			margin:0 40rpx;
			border-bottom:2rpx solid #F7F7FA;
			display: flex;
			align-items: center;
			label{
				width: 84rpx;
				margin-right: 48rpx;
			}
			input{
				flex:1;
				height: 100%;
				font-size: 24rpx;
			}
			.right-text{
				font-size: 24rpx;
				color: #1C1C1C;
			}
			.radio-wrap{
				width: 100%;
				display: flex;
				justify-content: flex-end;
				.radio-item{
					display: flex;
					align-items: center;
					text{
						margin-left: 10rpx;
					}
					&:first-of-type{
						margin-right:190rpx;
					}
				}
			}
		}
	}
	.pl{
		font-size: 24rpx;
		color: #CCCCCC;
	}
	.btn{
		width: 662rpx;
		height: 88rpx;
		background: #0E0E0E;
		border-radius: 44rpx;
		font-size: 32rpx;
		color:#fff;
		margin:60rpx auto 0;
	}
	.success-wrap{
		width: 600rpx;
		height: 432rpx;
		background: url(@/static/success-bg.png) no-repeat;
		background-size: 100% 100%;
		position: fixed;
		left:0;
		top:456rpx;
		right:0;
		margin:auto;
		image{
			width: 128rpx;
			height: 128rpx;
			display: block;
			margin:50rpx auto 0;
		}
		.tip{
			font-weight: bold;
			font-size: 32rpx;
			margin-top:12rpx;
			text-align: center;
		}
		.know{
			width: 260rpx;
			height: 72rpx;
			background: #000000;
			border-radius: 36rpx;
			color:#fff;
			margin:50rpx auto 0;
		}
	}

</style>
